/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {DeviceEventEmitter, TextInput} from 'react-native';
import {
  Text,
  View,
  Colors,
  TouchableOpacity,
  Card,
  Avatar,
  Checkbox,
} from 'react-native-ui-lib';
import * as Progress from 'react-native-progress';
import Clipboard from '@react-native-clipboard/clipboard';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

let AuditItem = ({item, done, checkedList, setCheckedList}) => {
  const Prefix = global.file;
  const ifselected = checkedList?.some?.(it => it.id === item.id);
  const iftype = item.type === 1;
  let {actualTime, planTime} = item ?? {};
  const bgcolor = item.status === 3 ? '#ff4800' : '#238659';
  const curselected = checkedList?.filter?.(it => it.id === item.id)?.[0] ?? {};

  return (
    <Card
      key={item?.id}
      flex
      enableShadow={false}
      padding-12
      marginH-12
      marginT-12
      containerStyle={{
        backgroundColor: Colors.colorBgSecondary,
      }}
      style={{gap: 10}}
      onPress={() => {
        // navigation.navigate('DetailPage', {
        //   id: item.id,
        //   missionName: item.missionName,
        // });
        if (!ifselected) {
          setCheckedList(s => {
            let news = [...s];
            news.push({
              id: item.id,
            });
            return news;
          });
        } else {
          setCheckedList(s => {
            let news = [...s];
            return news.filter(it => it.id !== item.id);
          });
        }
      }}>
      <View row style={{gap: 8}} spread centerV>
        {done ? (
          <View row gap={6}>
            <View
              width={20}
              height={20}
              borderRadius={4}
              backgroundColor={bgcolor}
            />
            <Text subheading style={{fontWeight: 'bold'}}>
              {item.projectName}
            </Text>
          </View>
        ) : (
          <Checkbox
            color={iftype ? Colors.primaryColor : Colors?.colorTextBase}
            labelStyle={{
              marginLeft: 8,
              fontWeight: 'bold',
              color: Colors?.colorTextBase,
            }}
            value={ifselected}
            onValueChange={val => {
              if (val) {
                setCheckedList(s => {
                  let news = [...s];
                  news.push({
                    id: item.id,
                  });
                  return news;
                });
              } else {
                setCheckedList(s => {
                  let news = [...s];
                  return news.filter(it => it.id !== item.id);
                });
              }
            }}
            label={item.projectName}
          />
        )}

        <Text style={{fontWeight: 'bold', color: Colors.colorTextBase}} body>
          {item.workDate}
        </Text>
      </View>
      <View
        row
        left
        center
        backgroundColor={Colors?.cardbackgroundColor}
        borderRadius={6}
        padding-10
        paddingB-18>
        <Text body>
          填报{' '}
          <Text
            subheading
            color={Colors?.primaryColor}
            style={{fontSize: 20, fontWeight: 'bold'}}>
            {item.workTime}
          </Text>{' '}
          小时
        </Text>
      </View>

      {iftype && (
        <View row gap={6} centerV>
          <Progress.Circle
            size={24}
            progress={item?.progress / 100}
            color={Colors.primaryColor}
            showsText={false}
            textStyle={{
              fontSize: 8,
            }}
          />
          {item.itemType === 2 && (
            <FontAwesome name={'bug'} size={18} color={Colors.$iconDanger} />
          )}
          <TouchableOpacity
            onPress={() => {
              DeviceEventEmitter.emit('toast', {
                message: item.missionNo + '已复制！',
                type: 'success',
              });
              Clipboard.setString(item.missionNo);
            }}>
            <Text body style={{color: Colors.colorTextBase}}>
              {item.missionNo}
            </Text>
          </TouchableOpacity>
        </View>
      )}

      <View style={{gap: 8}}>
        <Text body style={{fontWeight: 'bold', color: Colors.colorTextBase}}>
          {iftype ? item.itemName : '自定义日报'}
        </Text>
      </View>
      <View row centerV spread>
        <View row centerV gap={6}>
          <Avatar
            source={{
              uri: Prefix + item?.userHeadUrl,
            }}
            size={30}
            label={item?.userHeadUrl ? null : item?.userName?.charAt(0)}
          />
          <Text subheading>{item?.userName}</Text>
        </View>
        <View>
          {iftype && (
            <View row centerV>
              {actualTime < planTime ? (
                <Text body>
                  <Text subheading>累计消耗 {actualTime ?? '0'}h</Text>/ 计划{' '}
                  {item.planTime ?? '- '}h
                </Text>
              ) : (
                <Text body>
                  计划 {item.planTime ?? '-'}h /
                  <Text subheading>累计消耗 {actualTime ?? '0'}h</Text>
                </Text>
              )}
            </View>
          )}
        </View>
      </View>

      {item.remark && (
        <View
          borderTopWidth={0.5}
          borderColor={Colors?.backgroundColor}
          paddingT-6
          gap={6}
          marginT-6>
          <Text body>备注: {item.remark ?? '-'}</Text>
        </View>
      )}
      {(ifselected || (item?.refuse && done)) && (
        <View
          left
          top
          style={{
            backgroundColor: Colors.cardbackgroundColor,
            borderRadius: 12,
            padding: 12,
            paddingTop: done ? 12 : 6,
          }}>
          {done ? (
            <Text body color={bgcolor}>
              拒绝理由：{item.refuse}
            </Text>
          ) : (
            <TextInput
              multiline
              numberOfLines={6} // 设置显示的行数
              placeholder="请输入拒绝理由"
              value={curselected?.refuse}
              onChangeText={value => {
                setCheckedList(s => {
                  return s?.map(its => {
                    if (its.id === item.id) {
                      its.refuse = value;
                    }
                    return its;
                  });
                });
              }}
              textAlignVertical="top"
              style={{
                width: '100%',
                height: 166,
              }}
            />
          )}
        </View>
      )}
    </Card>
  );
};

export default AuditItem;
